<template>
	<view class="container">
		<!-- 左侧分类菜单 -->
		<scroll-view class="menu-scroll" scroll-y>
			<view 
				class="menu-item" 
				v-for="(item, index) in categoryList" 
				:key="index"
				:class="{ active: currentCategory === index }"
				@click="switchCategory(index)"
			>
				<text>{{ item.name }}</text>
			</view>
		</scroll-view>
		
		<!-- 右侧商品列表 -->
		<scroll-view class="content-scroll" scroll-y>
			<block v-if="subCategoryList.length">
				<view class="sub-category">
					<view 
						class="sub-category-item" 
						v-for="(item, index) in subCategoryList" 
						:key="index"
						@click="goProductList(item)"
					>
						<image :src="item.image" mode="aspectFill"></image>
						<text>{{ item.name }}</text>
					</view>
				</view>
			</block>
			<view v-else class="empty">暂无数据</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentCategory: 0,
				categoryList: [{
					id: 1,
					name: '新鲜水果',
					children: [{
						id: 11,
						name: '苹果',
						image: '/static/category/apple.jpg'
					}, {
						id: 12,
						name: '香蕉',
						image: '/static/category/banana.jpg'
					}, {
						id: 13,
						name: '橙子',
						image: '/static/category/orange.jpg'
					}]
				}, {
					id: 2,
					name: '蔬菜豆制',
					children: [{
						id: 21,
						name: '生菜',
						image: '/static/category/lettuce.jpg'
					}, {
						id: 22,
						name: '豆腐',
						image: '/static/category/tofu.jpg'
					}]
				}, {
					id: 3,
					name: '肉禽蛋品',
					children: [{
						id: 31,
						name: '猪肉',
						image: '/static/category/pork.jpg'
					}, {
						id: 32,
						name: '鸡蛋',
						image: '/static/category/egg.jpg'
					}]
				}, {
					id: 4,
					name: '海鲜水产',
					children: [{
						id: 41,
						name: '鱼类',
						image: '/static/category/fish.jpg'
					}, {
						id: 42,
						name: '虾类',
						image: '/static/category/shrimp.jpg'
					}]
				}, {
					id: 5,
					name: '乳品烘焙',
					children: [{
						id: 51,
						name: '牛奶',
						image: '/static/category/milk.jpg'
					}, {
						id: 52,
						name: '面包',
						image: '/static/category/bread.jpg'
					}]
				}]
			}
		},
		computed: {
			subCategoryList() {
				return this.categoryList[this.currentCategory]?.children || []
			}
		},
		methods: {
			switchCategory(index) {
				this.currentCategory = index
			},
			goProductList(item) {
				uni.navigateTo({
					url: `/pages/product/list?category=${item.id}&name=${item.name}`
				})
			}
		}
	}
</script>

<style lang="scss">
.container {
	display: flex;
	height: 100vh;
}

.menu-scroll {
	width: 200rpx;
	height: 100%;
	background: #f6f6f6;
	
	.menu-item {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #333;
		position: relative;
		
		&.active {
			background: #fff;
			color: #ff7d00;
			font-weight: bold;
			
			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36rpx;
				width: 8rpx;
				background: #ff7d00;
				border-radius: 0 4rpx 4rpx 0;
			}
		}
	}
}

.content-scroll {
	flex: 1;
	height: 100%;
	background: #fff;
	
	.sub-category {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		
		.sub-category-item {
			width: 33.33%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;
			
			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 12rpx;
				margin-bottom: 16rpx;
			}
			
			text {
				font-size: 24rpx;
				color: #333;
			}
		}
	}
	
	.empty {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		padding: 100rpx 0;
	}
}
</style> 